iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

Angular10 實作教學系列 第 4

NG10鐵人賽 - 4 - Angular Material 日期使用(4) - 日期範圍選取;過濾選取日期

  • 分享至 

  • xImage
  •  

功能一、 日期範圍選擇,兩個輸入框

需要先 Import FormsModule

html

<input name="dateForm" [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="開始日期" [selectMode]="'rangeFrom'" [(ngModel)]="selectedDate">
<mat-datepicker-toggle [owlDateTimeTrigger]="dt2"></mat-datepicker-toggle>
<owl-date-time #dt2></owl-date-time>

<input name="dateForm" [owlDateTime]="dt3" [owlDateTimeTrigger]="dt3" placeholder="結束日期" [selectMode]="'rangeTo'" [(ngModel)]="selectedDate">
<mat-datepicker-toggle [owlDateTimeTrigger]="dt3"></mat-datepicker-toggle>
<owl-date-time #dt3></owl-date-time>

selectedDate 是一個陣列: [0] 是開始日期時間 [1] 是結束日期時間

ts

export class AppComponent {
    selectedDate;
}

畫面

https://ithelp.ithome.com.tw/upload/images/20200904/20107754C20eR4Wr2b.png

功能二、 過濾不能選取的日期

禁止選取星期二和星期五

html

<input [owlDateTime]="dt2" placeholder="日期" [owlDateTimeFilter]="filterDate"><mat-datepicker-toggle [owlDateTimeTrigger]="dt2"></mat-datepicker-toggle><owl-date-time #dt2></owl-date-time>

ts

export class AppComponent {
    filterDate(date: Date) {
        const day = date.getDay();
        return day !== 2 && day !== 5;
    }
}

畫面

https://ithelp.ithome.com.tw/upload/images/20200904/20107754vMC77FfuSu.png


上一篇
NG10鐵人賽 - 3 - Angular Material 日期使用(3) - 日曆常用功能
下一篇
NG10鐵人賽 - 5 - Angular Material 日期使用(5) - 選擇日期並限制下一個日期的選擇
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言